INTRODUCCIÓN A LA PROGRAMACIÓN WEB 1.1 ¿Qué es la Programación Web? La programación web es el proceso de crear sitios y aplicaciones que se ejecutan en navegadores web. Implica el uso de varios lenguajes y tecnologías para diseñar, estructurar y hacer que las páginas sean interactivas. Tecnologías principales: 1. HTML (HyperText Markup Language) : Estructura y contenido de la web. 2. CSS (Cascading Style Sheets) : Diseño y apariencia de la web. 3. JavaScript : Interactividad y comportamiento dinámico. 1.2 ¿Cómo funciona una página web? Una página web es un conjunto de archivos que se almacenan en un servidor y se acceden a través de un navegador. El navegador interpreta el código HTML, aplica los estilos CSS y ejecuta JavaScript para mostrar el contenido de manera interactiva. Esquema básico del funcionamiento: 1. El usuario ingresa una dirección web (URL) en su navegador. 2. El navegador solicita los archivos al servidor. 3. El servidor envía los archivos al navegador. 4. El navegador interpreta el HTML para mostrar la página. 1.3 Nuestro primer sitio web en Visual Studio Code Vamos a crear una página web sencilla utilizando HTML en Visual Studio Code . Pasos para configurar Visual Studio Code: 1. Descarga e instala Visual Studio Code desde aquí . 2. Abre Visual Studio Code y crea una nueva carpeta para tu proyecto. 3. Dentro de la carpeta, crea un nuevo archivo llamado index.html . 4. Copia el siguiente código dentro del archivo index.html y guárdalo.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Primera Página Web</title> </head> <body> <h1>¡Hola, Mundo!</h1> <p>Esta es mi primera página web.</p> </body> </html> Ejecutar el archivo en el navegador: 1. En Visual Studio Code , instala la extensión Live Server . 2. Haz clic derecho en index.html y selecciona Open with Live Server . 3. El navegador se abrirá mostrando tu página web. Explicación: HTML : Define la estructura de la página con un título y un texto.
1.4 Así quedará: 1.5 Ejercicios Ejercicio 1: Modificar el texto Cambia el texto del <h1> y del <p> por algo personalizado. Ejercicio 2: Agregar más contenido Añade un segundo párrafo con información adicional sobre ti o tu sitio. Con esto, hemos creado y modificado nuestra primera página web en Visual Studio Code. ¡Sigamos aprendiendo en el siguiente capítulo! Contactanos Español Sin Fronteras Gmail espanolsinfronteras1@gmail.com Español Sin Fronteras - Recursos Educativos Gratuitos Instagram @espanol_sin_fronteras_org